<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网络请求</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script type="text/babel">
/*
1,Ajax原生js语法,内部的实现核心是XMLHttpRequest对象
2,Axios Promise语法,内部的实现核心XMLHttpRequest对象
3,Fetch Promise语法,原生的JS网络请求实现,
不是XMLHttpRequest对象,而是XMLHttp
* */
class APP extends React.Component{
    constructor(props) {
        super(props);
    }
    render() {
        return <ul>
            <li><button onClick={this.getRequest.bind(this)}>GET请求</button></li>
            <li><button onClick={this.PostRequest.bind(this)}>POST请求</button></li>
            <li><button onClick={this.Elm.bind(this)}>POST请求</button></li>
        </ul>
    }
    getRequest(){
    //    get请求
        fetch("http://127.0.0.1:8989/getReq?name=lily&sex=girl",{method:"get"}).then(res=>{
        /*
        arrayBuffer() 流数组
        blob() 二进制对象
        json() json解析的值
        text() 文本值
        formData() formDate对象
        * */
            return res.json()
        }).then(data=>{
            console.log(data);
        })
    }
    PostRequest(){
    //    POST请求
        fetch("http://127.0.0.1:8989/postReq",{
            method:"POST",
            //json格式
            // body:JSON.stringify({name:"张三",age:88}),
            // headers:{"Content-Type":"application/json"}
            //键值对格式
            body:'name=lily&sex=girl',
            headers:{"Content-Type":"application/x-www-form-urlencoded"}
        }).then(res=>{return  res.json()}).then(data=>{
            console.log(data);
        })
    }
    Elm(){
        fetch("https://elm.cangdu.org/v1/cities?type=guess").then(res=>res.json()).then(data=>{
            console.log(data)
        })
    }

}
ReactDOM.render(<APP/>,app)
</script>